<template>
  <div class="music">
    <div class="music__main">
      <div class="music__main__cover" @click="play">
        <div class="boang-button flex flex-center">
          <van-icon
            :name="isPlay ? 'pause' : 'play'"
            color="#FFF"
            size="20"
          />
        </div>
      </div>
      <div class="music__main__timeBar mt5">
        <div
          class="bar"
          ref="bar"
          @click="handClickBar"
        >
          <div
            class="bar__slid"
            ref="slid"
            @click="handClickBar"
          >
            <div
              class="biaoshi"
            />
          </div>
        </div>
        <div class="time mt25">
          <span class="f16">{{ realMusicTime }}</span>
          <span>{{ totalMusicTime }}</span>
        </div>
      </div>
    </div>
    <div class="music__mask" />
    <audio
      xlt-audio
      ref="music"
      :src="src"
    />
  </div>
</template>
<script>
import { computed, getCurrentInstance } from 'vue';
import { useMedia } from './useMedia';
export default {
  props: {
    src: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    key: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isPlay: false,
      realMusicTime: '00:00',
      totalMusicTime: '00:00'
    };
  },
  mounted() {
    this.watchMusicTime();
  },
  setup() {
    const ins = getCurrentInstance();
    const refMusic = computed(() => ins.refs.music);
    useMedia(refMusic);
  },
  methods: {
    play() {
      if (this.music.paused) {
        this.music.play();
        this.isPlay = true;
      } else {
        this.music.pause();
        this.isPlay = false;
      }
    },
    // 处理时间
    handlMusicTime() {
      //用秒数来显示当前播放进度
      let timeDisplay = Math.floor(this.music.currentTime); //获取实时时间
      //分钟
      let minute = parseInt(timeDisplay / 60);
      if (minute < 10) {
        minute = '0' + minute;
      }
      //秒
      let second = Math.round(timeDisplay % 60);
      if (second < 10) {
        second = '0' + second;
      }
      this.realMusicTime = minute + ':' + second;
    },
    // 处理进度条
    handMusicBar() {
      let slid = this.$refs.slid;
      let duration = this.music.duration;
      let x = ((this.music.currentTime / duration) * 100).toFixed(2) + '%';
      slid.style.width = x;
    },
    // 处理点击进度条事件
    handClickBar(e) {
      const barTotalWidth = this.$refs.bar.offsetWidth; // bar 总宽度
      const rect = e.target.getBoundingClientRect(); // 元素右边距离页面边距的距离 返回上下左右
      let length = e.pageX - rect.left;
      this.music.currentTime = (length / barTotalWidth) * this.music.duration; // 计算播放时间 位置百分比*总时间
      this.$nextTick(() => {
        this.music.play();
        this.isPlay = true;
      });
    },
    //使用事件监听方式捕捉事件
    watchMusicTime() {
      this.$nextTick(() => {
        this.music = this.$refs.music;
        this.music.addEventListener(
          'timeupdate',
          () => {
            this.handlMusicTime();
            setTimeout(() => {
              this.handMusicBar();
            });
          },
          false
        );
        // 播放完毕
        this.music.addEventListener('ended', () => {
          this.isPlay = false;
          this.handlMusicTime();
        });

        this.music.addEventListener(
          'pause',
          () => {
            this.isPlay = false;
          },
          false
        );
        // 捕获音频文件已准备完毕
        // 当媒体文件可以播放的时候会触发oncanplay事件,也可以用oncanplay
        this.music.oncanplaythrough = () => {
          let time = this.music.duration;
          //分钟
          let minutes = parseInt(time / 60);
          if (minutes < 10) {
            minutes = '0' + minutes;
          }
          //秒
          let seconds = Math.round(time % 60);
          if (seconds < 10) {
            seconds = '0' + seconds;
          }
          this.totalMusicTime = minutes + ':' + seconds;
        };
      });
    }
  }
};
</script>
<style lang="scss">
@keyframes musicRotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.music {
  margin: 20px auto;
  border-radius: 105px;
  position: relative;
  padding: 30px;
  box-sizing: border-box;
  overflow: hidden;
  background: #f5f5fa;
  &__main {
    display: flex;
    &__cover {
      width: 80px;
      height: 80px;
      overflow: hidden;
      border-radius: 50%;
      background-color: #dddddd;
      cursor: pointer;
      animation: musicRotate 10s linear infinite;
      animation-play-state: paused; // 暂定动画
      img {
        width: 100%;
        height: 100%;
      }
      &.active {
        animation-play-state: running; // 运行动画
      }
    }
    &__timeBar {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      padding-left: 20px;
      box-sizing: border-box;
      .time {
        display: flex;
        justify-content: space-between;
        color: #373d52;
        span {
          font-size: 30px;
          line-height: 1;
          font-weight: 600;
        }
      }
      .bar {
        height: 8px;
        background-color: #d8d8d8;
        border-radius: 8px;
        position: relative;
        border-radius: 8px;
        // overflow: hidden;
        cursor: pointer;
        &__slid {
          position: absolute;
          left: 0;
          top: 0;
          background-color: #27cdc5;
          height: 100%;
          width: 0;
          border-radius: 8px;
          transition: width 0.3s;
        }
      }
    }
  }
  &__btn {
    position: absolute;
    right: 30px;
    top: 10px;
    i {
      font-size: 18px;
      color: #fff;
      cursor: pointer;
    }
  }
  &__mask {
    background-image: url('http://photo.16pic.com/00/37/25/16pic_3725591_b.jpg');
    z-index: -2;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    filter: blur(15px);
    opacity: 0.5;
    transition: all 0.8s;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    &::before {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      z-index: -1;
      content: '';
      background-color: rgba(0, 0, 0, 0.08);
    }
  }
}
.boang-button {
  width: 84px;
  height: 84px;
  background: #27cdc5;
}
.biaoshi {
  width: 20px;
  height: 20px;
  background: #27cdc5;
  border-radius: 20px;
  position: absolute;
  right: -5px;
  top: -5px;
  z-index: 20;
}
</style>